<template>
	<view class="home-page">
		<!-- 背景图 -->
		<view class="bg-container">
		<image src="https://apizx01.sc798.com/Resource/home/home.jpg" class="bg-image" />
		</view>
		<!-- 内容区域 -->
		<view class="content-wrapper">
			<!-- Logo区域 -->
			<view class="logo-section">
				<image class="logo-image" src="https://apizx01.sc798.com/Resource/home/logo.png" mode="aspectFit"></image>
				<text class="logo-title">湖北征信</text>
			</view>
			
			<!-- 横向居中图片 -->
			<view class="center-image-section">
				<image class="center-image" src="https://apizx01.sc798.com/Resource/home/dc.png" mode="aspectFit"></image>
			</view>
			
			<!-- 搜索区域 -->
			<view class="search-section" @click="goToSearch">
				<view class="search-container">
					<image class="search-icon" src="https://apizx01.sc798.com/Resource/home/search.png" mode="aspectFit"></image>
					<input 
						class="search-input" 
						placeholder="请输入企业名称或统一社会信用代码"
						v-model="searchText"
						@click.stop="goToSearch"
					/>
				</view>
			</view>

         <!-- 导航区 -->
			<view class="nav-section">
				<!-- 上排四个导航块 -->
				<view class="nav-row">
					<view class="nav-item" @click="navigateTo('高级查询')">
						<image class="nav-icon" src="https://apizx01.sc798.com/Resource/home/gjcx.png" mode="aspectFit"></image>
						<text class="nav-title">高级查询</text>
					</view>
					<view class="nav-item" @click="navigateTo('查报告')">
						<image class="nav-icon" src="https://apizx01.sc798.com/Resource/home/cbg.png" mode="aspectFit"></image>
						<text class="nav-title">查报告</text>
					</view>
					<view class="nav-item" @click="navigateTo('查专利')">
						<image class="nav-icon" src="https://apizx01.sc798.com/Resource/home/czl.png" mode="aspectFit"></image>
						<text class="nav-title">查专利</text>
					</view>
					<view class="nav-item" @click="navigateTo('查商标')">
						<image class="nav-icon" src="https://apizx01.sc798.com/Resource/home/csb.png" mode="aspectFit"></image>
						<text class="nav-title">查商标</text>
					</view>
				</view>
				
				<!-- 下排四个导航块 -->
				<view class="nav-row">
					<view class="nav-item" @click="navigateTo('查政策')">
						<image class="nav-icon" src="https://apizx01.sc798.com/Resource/home/czc.png" mode="aspectFit"></image>
						<text class="nav-title">查政策</text>
					</view>
					<view class="nav-item" @click="navigateTo('查舆情')">
						<image class="nav-icon" src="https://apizx01.sc798.com/Resource/home/cyq.png" mode="aspectFit"></image>
						<text class="nav-title">查舆情</text>
					</view>
					<view class="nav-item" @click="navigateTo('查商机')">
						<image class="nav-icon" src="https://apizx01.sc798.com/Resource/home/csj.png" mode="aspectFit"></image>
						<text class="nav-title">查商机</text>
					</view>
					<view class="nav-item" @click="navigateTo('全部功能')">
						<image class="nav-icon" src="https://apizx01.sc798.com/Resource/home/qbgn.png" mode="aspectFit"></image>
						<text class="nav-title">全部功能</text>
					</view>
				</view>
			</view>



			<!-- 征信 -->
			<view class="zhengxin-section">
				<image class="zhengxin-image" src="https://apizx01.sc798.com/Resource/home/zx.png" ></image>
			</view>

			<!-- 特色服务 -->
			<view class="tesexuefu-section">
				<image class="tesexuefu-bg" src="https://apizx01.sc798.com/Resource/home/tsfw.png" mode="aspectFill"></image>
				<view class="tesexuefu-content">
					<text class="tesexuefu-title">特色服务</text>
					<view class="tesexuefu-grid">
						<view class="tesexuefu-item">
							<image class="tesexuefu-bg-img" src="https://apizx01.sc798.com/Resource/home/rmcy.png" mode="aspectFill"></image>
						</view>
						<view class="tesexuefu-item">
							<image class="tesexuefu-bg-img" src="https://apizx01.sc798.com/Resource/home/kksb.png" mode="aspectFill"></image>
						</view>
						<view class="tesexuefu-item">
							<image class="tesexuefu-bg-img" src="https://apizx01.sc798.com/Resource/home/dttk.png" mode="aspectFill"></image>
						</view>
						<view class="tesexuefu-item">
							<image class="tesexuefu-bg-img" src="https://apizx01.sc798.com/Resource/home/xsqy.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
			

			<!-- 切换 -->
			<view class="switch-section">
				<view class="switch-item" :class="{ 'active': activeTab === 1 }" @click="switchTab(1)">
					<text class="switch-title">企业监控</text>
					<view class="switch-indicator" v-if="activeTab === 1"></view>
				</view>
				<view class="switch-item" :class="{ 'active': activeTab === 2 }" @click="switchTab(2)">
					<text class="switch-title">发现好企</text>
					<view class="switch-indicator" v-if="activeTab === 2"></view>
				</view>
			</view>

			<!-- 默认状态（无企业时显示） -->
			<view class="default-state" v-if="!hasEnterprises">
				<view class="default-image-container">
					<image class="default-image" src="https://apizx01.sc798.com/Resource/home/jk.png" mode="aspectFit"></image>
					<text class="default-overlay-text">7×24小时 实时态势感知</text>
				</view>
				<text class="default-description">实时洞察关注对象发生的工商变更、经营变化及风险动态</text>
				<view class="default-button">
					<text class="default-button-text">添加关注</text>
				</view>
			</view>

			<!-- 动态（有企业时显示） -->
			<view class="dongtai-section" v-if="hasEnterprises">
				<text class="dongtai-title">动态</text>
				<view class="dongtai-divider"></view>
				<text class="dongtai-content">
					共监控6家企业 今日新增 <text class="highlight">0</text> 条动态
				</text>
				<image class="dongtai-arrow" src="https://apizx01.sc798.com/Resource/home/right.png" ></image>
			</view>

			<!-- 选项（有企业时显示） -->
			<view class="xuanxiang-section" v-if="hasEnterprises">
				<view 
					class="xuanxiang-item" 
					:class="{ 'active': selectedOption === '全部' }" 
					@click="selectOption('全部')"
				>
					<text class="xuanxiang-text">全部</text>
				</view>
				<view 
					class="xuanxiang-item" 
					:class="{ 'active': selectedOption === '公司变更' }" 
					@click="selectOption('公司变更')"
				>
					<text class="xuanxiang-text">公司变更</text>
				</view>
				<view 
					class="xuanxiang-item" 
					:class="{ 'active': selectedOption === '司法起诉' }" 
					@click="selectOption('司法起诉')"
				>
					<text class="xuanxiang-text">司法起诉</text>
				</view>
				<view 
					class="xuanxiang-item" 
					:class="{ 'active': selectedOption === '行政处罚' }" 
					@click="selectOption('行政处罚')"
				>
					<text class="xuanxiang-text">行政处罚</text>
				</view>
				<view 
					class="xuanxiang-item" 
					:class="{ 'active': selectedOption === '招投标' }" 
					@click="selectOption('招投标')"
				>
					<text class="xuanxiang-text">招投标</text>
				</view>
				<view 
					class="xuanxiang-item" 
					:class="{ 'active': selectedOption === '股权融资' }" 
					@click="selectOption('股权融资')"
				>
					<text class="xuanxiang-text">股权融资</text>
				</view>
			</view>

			<!-- 监控（有企业时显示） -->
			<view class="jiankong-section" v-if="hasEnterprises">
				<view 
					class="jiankong-item" 
					v-for="(item, index) in jiankongList" 
					:key="index"
				>
					<!-- 左侧图标 -->
					<view class="jiankong-icon">
						<text class="icon-text">{{ item.firstChar }}</text>
					</view>
					
					<!-- 右侧内容 -->
					<view class="jiankong-content">
						<!-- 标题 -->
						<text class="jiankong-title">{{ item.title }}</text>
						
						<!-- 标签区域 -->
						<view class="jiankong-tags">
							<view class="tag-item legal">
								<text class="tag-text">法律诉讼</text>
							</view>
							<view class="tag-item execution">
								<text class="tag-text">被执行人</text>
							</view>
						</view>
						
						<!-- 动态日期 -->
						<text class="jiankong-date">{{ item.date }}</text>
						
						<!-- 详细信息 -->
						<view class="jiankong-details">
							<text class="detail-item">案号：{{ item.caseNumber }}</text>
							<text class="detail-item">被执行人类型：{{ item.type }}</text>
							<text class="detail-item">执行标的：{{ item.amount }}</text>
							<text class="detail-item">执行状态：{{ item.status }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 响应式数据
const title = ref('湖北征信')
const searchText = ref('')
const activeTab = ref(1) // 默认选中第一项
const selectedOption = ref('全部') // 默认选中"全部"
const hasEnterprises = ref(false) // 控制是否有企业数据，默认无企业

// 监控列表数据
const jiankongList = ref([
	{
		title: '包头市玉仑钢铁贸易有限责任公司',
		firstChar: '包',
		date: '2025-09-06',
		caseNumber: '（2025） 内0207执恢514号',
		type: '非个人',
		amount: '2241760',
		status: '-'
	},
	{
		title: '北京科技有限公司',
		firstChar: '北',
		date: '2025-09-05',
		caseNumber: '（2025） 京0101执123号',
		type: '个人',
		amount: '500000',
		status: '执行中'
	},
	{
		title: '上海贸易有限公司',
		firstChar: '上',
		date: '2025-09-04',
		caseNumber: '（2025） 沪0101执456号',
		type: '非个人',
		amount: '1000000',
		status: '已结案'
	},
	{
		title: '深圳投资控股集团',
		firstChar: '深',
		date: '2025-09-03',
		caseNumber: '（2025） 粤0301执789号',
		type: '非个人',
		amount: '3000000',
		status: '执行中'
	}
])

// 切换方法
const switchTab = (tab) => {
	activeTab.value = tab
}

// 选择选项方法
const selectOption = (option) => {
	selectedOption.value = option
}

// 跳转到搜索页面
const goToSearch = () => {
	uni.navigateTo({
		url: '/pages/search/search'
	})
}

// 导航点击事件
const navigateTo = (navName) => {
	console.log('点击导航:', navName)
	// 这里可以根据不同的导航项跳转到不同页面
	// 暂时显示提示
	uni.showToast({
		title: `点击了${navName}`,
		icon: 'none'
	})
}

// 生命周期
onMounted(() => {
	console.log('首页已挂载')
})
</script>

<style lang="scss" scoped>
.home-page {
	position: relative;
	width: 100%;
	background-color: white;
	padding-bottom: 40rpx;
}

.bg-container {
	width: 100%;
	height: 460rpx;
}
.bg-image {
	// position: absolute;
	// top: 0;
	// left: 0;
	width: 100%;
	height: 100%;
	// z-index: 1;
}

.content-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	padding-top: 100rpx;
	min-height: 100vh;
	background-color: transparent;
	padding-bottom: 40rpx;
}

.logo-section {
	display: flex;
	align-items: center;
	padding: 0 15px;
	margin-bottom: 60rpx;
	
	.logo-image {
		width: 45rpx;
		height: 45rpx;
		margin-right: 20rpx;
	}
	
	.logo-title {
		font-size: 35rpx;
		font-weight: bold;
		color: white;
	}
}

.center-image-section {
	display: flex;
	justify-content: center;
	margin-bottom: 32rpx;
	
	.center-image {
		width: 622rpx;
		height: 56rpx;
	}
}

.search-section {
	display: flex;
	justify-content: center;
	margin-top: 55rpx;
	
	.search-container {
		width: 704rpx;
		height: 92rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		padding-left: 22rpx;
		display: flex;
		align-items: center;
		
		.search-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 18rpx;
		}
		
		.search-input {
			flex: 1;
			font-family: 'Alibaba PuHuiTi', sans-serif;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
			line-height: 40rpx;
			border: none;
			outline: none;
			background: transparent;
			
			&::placeholder {
				color: #999999;
			}
		}
	}
}

.nav-section {
	width: 100%;
	height: 344rpx;
	background: white;
	border-radius: 27rpx 27rpx 0 0;
	margin-top: 20rpx;
	padding: 40rpx 20rpx 30rpx 20rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.nav-row {
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	height: 50%;
} 
.nav-row:nth-child(2) {
	margin-top: 20rpx;
}

.nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	width: 80rpx;
	
	.nav-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 20rpx;
	}
	
	.nav-title {
		font-family: 'Alibaba PuHuiTi', sans-serif;
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
		text-align: center;
		line-height: 1.2;
		white-space: nowrap;
	}
}

.zhengxin-section {
	display: flex;
	justify-content: center;
	
	
	.zhengxin-image {
		width: 704rpx;
		height: 160rpx;
	}
}

.tesexuefu-section {
	width: 704rpx;
	height: 357rpx;
	margin: 40rpx auto 0 auto;
	position: relative;
	
	.tesexuefu-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	
	.tesexuefu-content {
		position: relative;
		z-index: 2;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 25rpx 17rpx 0 22rpx;
		box-sizing: border-box;
		
		.tesexuefu-title {
			font-family: 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
			font-weight: 500;
			font-size: 32rpx;
			color: #fff;
			margin-bottom: 20rpx;
		}
		
		.tesexuefu-grid {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			width: 704rpx;
			height: auto;
			padding: 6rpx 17rpx;
			box-sizing: border-box;
			gap: 10rpx;
			.tesexuefu-item {
				width: 320rpx;
				height: 128rpx;
				border-radius: 27rpx;
				position: relative;
				overflow: hidden;
				flex-shrink: 0;
				
				.tesexuefu-bg-img {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					object-fit: cover;
				}
			}
		}
	}
}



.switch-section {
	display: flex;
	// justify-content: center;
	margin-left: 24rpx;
	margin-top: 46rpx;
	gap: 46rpx;
}

.default-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 20rpx;
	
	.default-image-container {
		position: relative;
		width: 561rpx;
		height: 211rpx;
		
		.default-image {
			width: 100%;
			height: 100%;
		}
		
		.default-overlay-text {
			position: absolute;
			bottom: 24rpx;
			left: 50%;
			transform: translateX(-50%);
			font-weight: 600;
			font-size: 28rpx;
			color: #050505;
			text-align: center;
			white-space: nowrap;
		}
	}
	
	.default-description {
		margin-top: 20rpx;
		font-weight: 500;
		font-size: 20rpx;
		color: #050505;
		text-align: center;
	}
	
	.default-button {
		width: 280rpx;
		height: 72rpx;
		background: #2B6FEA;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 62rpx;
		
		.default-button-text {
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
}

.switch-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	cursor: pointer;
	
	.switch-title {
		font-family: 'Alibaba PuHuiTi', sans-serif;
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
		margin-bottom: 10rpx;
	}
	
	.switch-indicator {
		width: 40rpx;
		height: 4rpx;
		background: #296AFD;
		border-radius: 2rpx;
	}
}

.dongtai-section {
	width: 704rpx;
	height: 96rpx;
	background: #F4F5F7;
	border-radius: 8rpx;
	margin: 20rpx auto 0 auto;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	box-sizing: border-box;
	
	.dongtai-title {
		font-family: 'Alibaba PuHuiTi', sans-serif;
		font-weight: 600;
		font-size: 32rpx;
		color: #296AFD;
		margin-right: 20rpx;
	}
	
	.dongtai-divider {
		width: 2rpx;
		height: 32rpx;
		background: #D8D8D8;
		border-radius: 1rpx;
		margin-right: 20rpx;
	}
	
	.dongtai-content {
		flex: 1;
		font-family: 'Alibaba PuHuiTi', sans-serif;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
		
		.highlight {
			color: #296AFD;
		}
	}
	
	.dongtai-arrow {
		width: 32rpx;
		height: 44rpx;
		opacity: 0.4;
		margin-left: auto;
	}
}

.xuanxiang-section {
	margin: 20rpx auto 0 auto;
	padding: 0 24rpx;
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx 16rpx;
	// justify-content: center;
	box-sizing: border-box;
	
	.xuanxiang-item {
		height: 55rpx;
		background: #F2F4F8;
		border-radius: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 24rpx;
		box-sizing: border-box;
		cursor: pointer;
		
		&.active {
			border: 1rpx solid #296AFD;
			
			.xuanxiang-text {
				color: #296AFD;
			}
		}
		
		.xuanxiang-text {
			font-family: 'Alibaba PuHuiTi', sans-serif;
			font-weight: 400;
			font-size: 28rpx;
			color: #171E31;
			white-space: nowrap;
		}
	}
}

.jiankong-section {
	margin: 26rpx auto 0 auto;
	width: 704rpx;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	
	.jiankong-item {
		width: 704rpx;
		height: 364rpx;
		background: #F4F5F7;
		border-radius: 8rpx;
		display: flex;
		padding: 24rpx 20rpx;
		box-sizing: border-box;
		
		.jiankong-icon {
			width: 64rpx;
			height: 64rpx;
			background: #296AFD;
			border-radius: 8rpx;
			opacity: 0.4;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 0;
			
			.icon-text {
				font-family: 'Alibaba PuHuiTi', sans-serif;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
		
		.jiankong-content {
			flex: 1;
			margin-left: 28rpx;
			display: flex;
			flex-direction: column;
			
			.jiankong-title {
				font-family: 'Alibaba PuHuiTi', sans-serif;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				margin-bottom: 12rpx;
			}
			
			.jiankong-tags {
				display: flex;
				gap: 16rpx;
				margin-bottom: 18rpx;
				
				.tag-item {
					width: 128rpx;
					height: 44rpx;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					
					&.legal {
						background: rgba(247,181,0,0.2);
						
						.tag-text {
							color: #D49C00;
						}
					}
					
					&.execution {
						background: rgba(253,104,89,0.2);
						
						.tag-text {
							color: #FD6859;
						}
					}
					
					.tag-text {
						font-family: 'Alibaba PuHuiTi', sans-serif;
						font-weight: 400;
						font-size: 24rpx;
					}
				}
			}
			
			.jiankong-date {
				font-family: 'Alibaba PuHuiTi', sans-serif;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				margin-bottom: 10rpx;
			}
			
			.jiankong-details {
				display: flex;
				flex-direction: column;
				gap: 8rpx;
				
				.detail-item {
					font-family: 'Alibaba PuHuiTi', sans-serif;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					line-height: 40rpx;
				}
			}
		}
	}
}
</style>
